<template>
	<view class="container" v-if="status==1">
		<view class="header">
			<!-- 搜索栏 begin -->
			<view class="search-box">
				<view class="search-input" @tap="showSearch=true">
					<image src="/static/images/common/search-icon.png" class="search-icon"></image>
					<view>搜索</view>
				</view>
			</view>
			<!-- {{'上级码：'+sjm}}
			{{'登录用户身份码：'+sfm}} -->
			<!-- 搜索栏 end -->
			<view class="center">
				<view class="store">
					<view class="title">
						<image :src="Dining_type == '店内就餐' ? 
								'/static/images/common/star_normal.png' : 
								'/static/images/order/order_icon_address.png'" class="left-icon" />
						<!-- 为了测试方便，这里使用静态店铺数据 -->
						<view class="address" @tap="replaceAddress" v-if="Dining_type == '配送'">
							{{ address?address:'请添加收货地址' }}
						</view>
						<view class="address" @tap="jumpTableList" v-else>店内就餐<text
								v-if="table_num">{{' 桌号：'+table_num}}</text>
							<text v-else> ：点击选择桌号</text>
						</view>
						<image src="/static/images/common/black_arrow_right.png" class="right-icon"></image>
					</view>
					<view class="buttons">
						{{Dining_type}}
					</view>
				</view>
			</view>
			<!-- 滚动公告栏 begin -->
			<view class="notices" style="margin-top: -22px;">
				<image src="../../static/icon-img/notice.png" class="NoticeImage" style="margin-top: 3px;"></image>
				<swiper class="swiper" autoplay vertical :interval="3000" :duration="1000" circular>
					<swiper-item v-for="(item, index) in notices" :key="index" @tap="jump_notice(notice.id)">
						<view class="swiper-item">
							<view class="content" v-html="item"></view>
						</view>
					</swiper-item>
				</swiper>
				<view class="buttons" style="background-color: #4cd964;" @tap="callStaff()">服务铃</view>
			</view>
		</view>
		<!-- 滚动公告栏 end -->
		<view class="main">
			<!-- 左侧菜单 begin -->
			<scroll-view class="menu-bar" scroll-y scroll-with-animation :scroll-top="scrollTop">
				<view class="wrapper">
					<view class="menu-item" @tap="handleMenuSelected(category.category_id)"
						:class="{active: currentCategoryId == category.category_id}"
						v-for="(category, index) in categories" :key="index"
						@click="getdishesListcategory(category.category_id)">
						<!-- <image style="border-radius: 50%;height: 60px;" :src="category.category_pic" class="image" mode="widthFix"></image> -->
						<view class="title">{{ category.category_name }}</view>
					</view>
				</view>
			</scroll-view>
			<!-- 左侧菜单 end -->
			<!-- 右侧商品列表 begin -->

			<scroll-view class="product-section" scroll-y scroll-with-animation :scroll-top="productsScrollTop"
				@scroll="productsScroll">
				<view class="wrapper">
					<view id="ads">
						<!-- 广告栏1 begin -->
						<swiper class="ads1" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
							circular>
							<swiper-item v-for="(item, index) in ads1" :key="index">
								<image :src="item" class="image" mode="widthFix"></image>
							</swiper-item>
						</swiper>
						<!-- 广告栏1 end -->
					</view>
					<!-- 商品 begin -->
					<view class="products-list">
						<view class="products">
							<!-- 商品块 -->
							<!-- v-for="(product, key) in productList" :key="key" -->
							<view class="product" @tap="showProductDetailModal(product)"
								v-for="(product,index) in productList " :key="index">
								<image :src="product.dishes_cover" mode="widthFix" class="image"></image>
								<view class="content">
									<view class="name">{{product.dishes_name}}</view>
									<!-- <view class="labels">
										<view class="label" style="color: #999, background: #999"
											v-for="label in product.labels" :key="label.id">11111</view>
									</view> -->
									<view class="description">{{product.dishes_desc}}</view>
									<view class="price">
										<view>￥{{product.dishes_price}}</view>

										<actions :materials-btn="!product.is_sku"
											@materials="showProductDetailModal(product)" :number="productCartNum()"
											@add="handleAddToCart(product)" @minus="handleMinusFromCart(product)" />
									</view>
								</view>
							</view>
							<!-- 商品块 end -->
						</view>
					</view>
					<!-- 商品 end -->
				</view>
			</scroll-view>
			<!-- 右侧商品列表 end -->
		</view>
		<!-- 商品详情 modal begin -->
		<product-modal :product="product" :visible="productModalVisible" @cancel="closeProductDetailModal"
			@add-to-cart="handleAddToCartInModal" />
		<!-- 商品详情 modal end -->
		<!-- 购物车栏 begin -->
		<cart-bar :cart="cart" :type="Dining_type" @add="handleAddToCart" @minus="handleMinusFromCart"
			@clear="clearCart" @pay="pay" />
		<!-- 购物车栏 end -->
		<!-- 跳转搜索页面开始 -->
		<search :show="showSearch" :hotSearch="hotSearch" :categories="categories" @hide="showSearch=false"
			@choose="showProductDetailModal"></search>
		<!-- 跳转搜索页面结束 -->
	</view>
</template>

<script>
	import Search from './components/search/search.vue' //搜索组件
	import ProductModal from './components/product-modal/product-modal.vue' //菜品详情组件
	import Actions from './components/actions/actions.vue' //选择规格组件
	import CartBar from './components/cartbar/cartbar.vue' //购物车组件
	export default {
		components: {
			Search,
			ProductModal,
			Actions,
			CartBar,
		},
		data() {
			return {
				proImg: 'https://wzq0307.com/img/images/images/collect.png',
				showSearch: false, //搜索栏
				hotSearch: [],
				product: {},
				productList: [],
				productModalVisible: false,
				// dishes: {},
				categories: [],
				Dining_type: '店内就餐', //配送 or 店内就餐
				table_num: '', //选中的桌号
				notices: [], //头部公告栏
				productsScrollTop: 0, //左侧菜单栏
				scrollTop: 0, //左侧菜单栏
				currentCategoryId: 1001,
				ads1: [
					// "https://img1.baidu.com/it/u=1809207165,3572617058&fm=26&fmt=auto&gp=0.jpg",
					"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20200323ac%2F54%2Fw569h285%2F20200323%2F1e74-ireifzh7819248.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631170972&t=0449af668fe01c90173e7d222222a09d",
					"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.chuimg.com%2Fc04487eb173f4e59b858f84aaf62188a_4032w_3024h.jpg%3FimageView2%2F2%2Fw%2F660%2Finterlace%2F1%2Fq%2F90&refer=http%3A%2F%2Fi2.chuimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.chuimg.com%2Fc04487eb173f4e59b858f84aaf62188a_4032w_3024h.jpg%3FimageView2%2F2%2Fw%2F660%2Finterlace%2F1%2Fq%2F90&refer=http%3A%2F%2Fi2.chuimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631170972&t=d51ccfa8c49d2e3c3e3d177057ca3c2f",
					"https://gimg2.baidu.com/image_search/src=http%3A%2F%2F660.zsezt.com%2Fgeneral%2Fkindeditor%2Fattached%2Fimage%2F20160710%2F20160710090533_22080.jpg&refer=http%3A%2F%2F660.zsezt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631170972&t=dfcf9232eccf89e505587d6e4dc0a3bc"
				], //广告栏
				productModalVisible: false, //菜品详情
				cart: [], ///购物车
				is_sku: false,
				status:3
			}
		},
		onLoad: function(options) {
			
			let _this = this;
			uni.request({
				url: 'https://apiorder.wzq0307.com/api/Status/index',
				method: 'GET',
				data: {},
				success: (res) => {
					console.log(11111,res.data.data.status);
					_this.status=res.data.data.status;
						uni.setStorage('status',res.data.data.status);
				},
				fail: function(e) {
					console.log(JSON.stringify(e));
				}
			})
			// this.table_num='';
			this.getNoticeAll();
			this.getcategoryList();
			// this.getdishesList();
			this.getdishesListcategory(1)
			let table_num=options.table_num ?? 0
	
				this.table_num = table_num
			

		},
		onShow: function() {
			if (uni.getStorageSync('table_num')) {
				this.table_num = uni.getStorageSync('table_num')
			}
			if (uni.getStorageSync('categories')) {
				this.categories = uni.getStorageSync('categories');
			}
			if (uni.getStorageSync('dishes')) {
				this.productList = uni.getStorageSync('dishes');

			}
			this.getdishesListcategory(2);
		},
		computed: {
			productCartNum() { //计算单个饮品添加到购物车的数量
				return dishes_id => this.cart.reduce((acc, cur) => {
					if (cur.dishes_id === dishes_id) {
						return acc += cur.number
					}
					return acc
				}, 0)
			},
		},
		watch: {
			'table_num': function() {
				this.getdishesListcategory(1);
			}
		},
		methods: {
			//获取菜品分类
			getcategoryList: function() {
				let _this = this;
				uni.request({
					url: 'https://apiorder.wzq0307.com/api/category/list',
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							console.log(res)
							_this.categories = res.data.data.categoryList
							uni.setStorage({
								key: 'categories',
								data: res.data.data.categoryList
							});
							console.log(111, uni.getStorageSync('categories'));
						} else {
							alert("获取分类列表失败，具体信息：" + res.data.message);
						}

						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}
				})
			},
			//获取菜品所有列表
			getdishesList: function() {
				let _this = this;
				uni.request({
					url: 'https://apiorder.wzq0307.com/api/dishes/listse',
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							console.log(res)
							_this.productList = res.data.data.dishesList
							uni.setStorage({
								key: 'dishes',
								data: res.data.data.dishesList
							});
							// console.log(111, uni.getStorageSync('categories'));s
						} else {
							alert("获取分类列表失败，具体信息：" + res.data.message);
						}

						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}
				})
			},
			//获取菜品列表分类
			getdishesListcategory: function(index) {
				let _this = this;
				uni.request({
					url: 'https://apiorder.wzq0307.com/api/dishes/lists',
					method: 'GET',
					data: {
						category_id: index
					},
					success: (res) => {
						console.log(res);
						if (res.data.status == 0) {
							console.log(res)
							_this.productList = res.data.data.dishesList
							for (let i = 0; i < _this.productList.length; i++) {
								_this.productList[i].number = 0
							}
							uni.setStorage({
								key: 'dishes',
								data: res.data.data.dishesList
							});
							// console.log(222,_this.dishes)
						} else {
							alert("获取分类列表失败，具体信息：" + res.data.message);
						}

						// // 记录在本地
						// uni.setStorageSync("token", datamd5); 
						// uni.setStorageSync("time", data.time);
					},
					fail: function(e) {
						console.log(JSON.stringify(e));
					}

				})
			},
			//展示菜品详情页
			showProductDetailModal(product) {
				// console.log('product', product);
				this.product = product
				this.productModalVisible = true
			},
			//跳转到桌号页面
			jumpTableList() {
				uni.navigateTo({
					url: '../table_list/table_list'
				})
			},
			// 获取公告
			getNoticeAll() {
				this.notices = ['美味披萨正式来袭，先到先得', '欢迎光临，很高心为您服务~', '营养套餐，荤素搭配合理，减肥人员首选']
				// const _this = this;
				// noticeModel.getNoticeAll().then(res => {
				// 	_this.notices = res.data;
				// })
			},
			//呼叫铃
			callStaff() {
				uni.showLoading({
					title: '加载中'
				});

				setTimeout(function() {
					uni.hideLoading();
					uni.showToast({
						title: '呼叫成功',
						duration: 2000
					});
				}, 500);
			},
			//左侧菜单栏
			handleMenuSelected(id) {
				this.productsScrollTop = this.categories.find(item => item.category_id == id).top
				// this.getperductlist(id)
				this.$nextTick(() => this.currentCategoryId = id)
				this.scrollTop = (id - 1) * 60
				uni.showLoading({
					title: '加载中'
				});

				setTimeout(function() {
					uni.hideLoading();
				}, 500);
			},
			//打开购物车关闭菜品详情
			handleAddToCartInModal(product) {
				this.handleAddToCart(product)
				this.closeProductDetailModal()
			},
			//添加到购物车
			handleAddToCart(product) {
				this.is_sku = true
				// var product = {
				// 	id: 5,
				// 	goods_name: '烤豆腐',
				// 	price: 6.00,
				// 	number: 2,
				// 	sku: 5
				// }
				// console.log(222222222,product)
				console.log('product', product)
				const index = this.cart.findIndex(item => {
					console.log('item', item)
					console.log('product', product)
					if (!product.is_sku) {
						console.log('item3', item)
						return (item.dishes_id == product.dishes_id) && (item.materials_text == product
							.materials_text)
					} else {
						console.log('item2', item)
						return item.dishes_id == product.dishes_id
					}
				})
				console.log('4444', index);
				if (index > -1) {
					this.cart[index].number += 1
					return
				}

				let dat = {
					dishes_id: product.dishes_id,
					dishes_name: product.dishes_name,
					dishes_price: product.dishes_price,
					good: product,
					number: product.number || 1,
					dishes_repertory: product.dishes_repertory || 0,
					materials_text: product.materials_text || '',
					materials_price: product.materials_price,
					materials_sku_id: product.materials_sku_id || '',
					dishes_cover: product.dishes_cover,
					sku: product.dishes_repertory
				};
				// 判断是否有 sku
				if (product.dishes_repertory) {
					dat.is_sku = product.dishes_repertory;
				} else {
					dat.is_sku = 0;
				}
				console.log('product', product)
				//判断购物车中是否已经存在该商品 id 和 规格id
				let flag = false;
				for (let k in this.cart) {
					console.log('k', k)
					if (this.cart[k].dishes_id == dat.dishes_id && this.cart[k].materials_sku_id == dat.materials_sku_id) {
						this.cart.splice(k, 1);
						this.cart.push(dat);
						// this.cart[k].number+=1
						console.log(111111);
						flag = true;
					}
				}
				if (!flag) {
					this.cart.push(dat);
				}
				console.log('cart:', this.cart)
				console.log('dat', dat)
			},
			//支付下单
			pay() {
				let Dtype = uni.getStorageSync('Dtype')
				let tab_num = uni.getStorageSync('table_num')
				if (tab_num>0) {
					uni.setStorageSync('cart', this.cart)
					// uni.navigateTo({
					//         url: '../order/preview?sid=1'
					// })
					uni.navigateTo({
						url: '../order/preview'
					})
				} else {
					uni.showToast({
						title: '请选择桌号',
						icon: 'none'
					})
				}

			},
			//从购物车减商品
			handleMinusFromCart(product) {
				let index
				if (product.is_sku) {
					index = this.cart.findIndex(item => item.dishes_id == product.dishes_id)
				} else {
					index = this.cart.findIndex(item => (item.dishes_id == product.dishes_id) && (item.materials_text ==
						product
						.materials_text))
				}
				this.cart[index].number -= 1
				if (this.cart[index].number <= 0) {
					this.cart.splice(index, 1)
				}
				console.log('product', product)
			},
			//清空购物车
			clearCart() {
				this.cart = [];
				uni.removeStorageSync('cart');
			},
			//关闭菜品详情组件
			closeProductDetailModal() {
				this.productModalVisible = false
				this.product = {}
			},
			productsScroll({
				detail
			}) {
				const {
					scrollTop
				} = detail
				let tabs = this.categories.filter(item => item.top <= scrollTop).reverse()
				if (tabs.length > 0) {
					this.currentCategoryId = tabs[0].category_id
				}
			},
		}
	}
</script>

<style lang="less">
	uni-page-head {
		display: none;
	}

	// index.scss文件内容开始
	.container {
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.uni-page-head {
		height: 0px !important;
	}

	.uni-placeholder {
		height: 0px !important;
	}

	.search-box {
		height: 100rpx;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search-input {
		height: 60rpx;
		width: 100%;
		background-color: #f7f7f7;
		font-size: 28rpx;
		border-radius: 50rem !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.buttons {
		display: flex;
		align-items: stretch;
		background-color: #CE935B;
		border-radius: 50rem !important;
		padding: 4rpx 15rpx;
		border: 2rpx solid #eaeaea;
		color: white;
		font-size: 0.6rem;

		.button {
			height: 100%;
			width: 50%;
			border-radius: 50rem !important;
			border: 0 !important;
			font-size: 24rpx !important;
			line-height: 2.4 !important;

			&.active {
				background-color: #343434;
				color: #ffffff !important;
				transition: all 0.3s;
			}
		}
	}

	.header {
		z-index: 10;



		.center {
			height: 130rpx;
			padding: 10rpx 40rpx;
			display: flex;
			flex-direction: column;

			.store {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
					overflow: hidden;

					.address {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.left-icon {
						flex-shrink: 0;
						width: 30rpx;
						height: 30rpx;
						margin: 10rpx;
					}

					.right-icon {
						flex-shrink: 0;
						width: 40rpx;
						height: 40rpx;
					}
				}


			}

			.location {
				font-size: 28rpx;
				color: #999;
			}
		}

		.NoticeImage {
			width: 30rpx;
			height: 30rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
		}

		.notices {
			height: 60rpx;
			display: flex;
			align-items: stretch;
			padding: 10rpx 40rpx;
			font-size: 24rpx;
			color: #999;

			.swiper {
				height: 100%;
				flex: 1;

				.swiper-item {
					width: 100%;
					height: 100%;
					display: flex;
					overflow: hidden;
					align-items: center;

					.image {
						width: 30rpx;
						height: 30rpx;
						flex-shrink: 0;
						margin-right: 10rpx;
					}

					.content {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.more {
				padding-left: 20rpx;
				display: flex;
				align-items: center;

				.text-share {
					background-color: #aaa;
					color: white;
					height: 40rpx;
					padding: 6rpx 20rpx;
					border-radius: 70rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 0.6rem;
				}

				.down-icon {
					margin-left: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.main {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.menu-bar {
		width: 170rpx;
		flex-shrink: 0;
		background-color: #f6f6f6;

		.wrapper {
			height: auto;

			.menu-item {
				padding: 30rpx 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;
				color: #999;
				overflow: hidden;

				&:nth-last-child(1) {
					margin-bottom: 100rpx;
				}

				.image {
					width: 40px;
					height: 40px;
				}

				.title {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&.active {
					background-color: #ffffff;
					color: #333;
					font-weight: 500 !important;
					border-left: 7rpx solid #CE935B;
				}
			}
		}
	}

	.product-section {
		flex: 1;

		.wrapper {
			padding: 0 20rpx;
			padding-bottom: 130rpx;

			.ads1 {
				height: 150px;

				.image {
					height: 100%;
					width: 100%;
				}
			}
		}


		.ads2 {}

		// .ads1 {
		// 	margin-bottom: 20rpx;
		// }

		.products-list {
			.category-name {
				padding: 30rpx 0;
				font-size: 28rpx;
				color: #999;
			}

			.products {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;
			}

			.product {
				display: flex;
				align-items: center;
				margin-bottom: 40rpx;

				.image {
					width: 180rpx;
					height: 135rpx;
					flex-shrink: 0;
					border-radius: 10%;
				}

				.content {
					flex: 1;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					padding-left: 20rpx;
					padding-top: 20rpx;

					.name {
						width: 350upx;
						font-size: 28rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 8rpx;
					}

					.labels {
						display: flex;
						font-size: 20rpx;
						margin-bottom: 8rpx;
						overflow: hidden;
						flex-wrap: wrap;

						.label {
							max-width: 40%;
							padding: 6rpx 10rpx;
							margin-right: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.description {
						margin-bottom: 20rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						color: #999;
						font-size: 24rpx;
					}

					.price {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}
	}

	.cart-actions {
		display: flex;
		align-items: center;

		.add-btn,
		.minus-btn {
			width: 50rpx;
			height: 50rpx;
		}

		.number {
			width: 50rpx;
			height: 50rpx;
			margin: 0 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
	}

	.meng {
		background-color: #000000;
		position: fixed;
		top: 0;
		opacity: 0.6;
		width: 100%;
		height: 100%;
		z-index: 999;
		padding-top: 20px;

		.righ {
			display: flex;
			justify-content: flex-end;
			padding-right: 15px;

			img {
				width: 60px;
				height: 100px;
			}
		}

		.one {
			color: #fff;
			padding: 10px 0 10px 90px;
			display: flex;
			align-items: flex-end;

			.one-l {
				display: flex;
				flex-wrap: wrap;

				.one-l-01 {
					color: #0E0F11;
					background-color: #fff;
					width: 23px;
					height: 23px;
					text-align: center;
					line-height: 23px;
					border-radius: 50%;
					font-size: 18px;
					margin-top: 4px;
				}

				.one-l-02 {
					font-size: 16px;
					padding: 0 10px;
					line-height: 29px;
				}

				.one-l-03 {
					border: 1px solid #9EA0A4;
					border-radius: 3px;
					width: 32px;
					height: 29px;
					text-align: center;
					background-color: #17242E;
					line-height: 29px;
					font-weight: 600;

					img {
						width: 20px;
						height: 20px;
						margin-top: 5px;
					}
				}

				.one-l-04 {
					padding: 10px 0 0 32px;
					font-size: 16px;
					line-height: 29px;
				}
			}

			.one-r img {
				width: 60px;
				height: 100px;
			}
		}

	}

	// index.scss文件内容结束
</style>
